<template>
	<div class="wrapper">
		<div class="edit_passwork">
			<div class="edit-form">
				<ul>
					<li class="form-item"><u-field icon="phone" label-width="30" v-model="customForm.linkMobile" type="number" :placeholder="placeholderPhone" clearable /></li>
					<!-- <li class="form-item"><u-field label-width="30" icon="lock" v-model="customForm.newPasswd" type="text" placeholder="请输入新密码" clearable /></li> -->
					<li class="form-item">
						<u-field label-width="30" icon="email" v-model="customForm.verifyCode" type="number" placeholder="验证码" clearable>
							<view class="get-code-btn" slot="right" @click="sendverifyCode">{{ sms.smsTitle }}</view>
						</u-field>
					</li>
				</ul>
			</div>
		</div>

		<div class="myBtn-box"><button class="myBtn" @click="updateHandle">验证</button></div>
	</div>
</template>

<script>
import { forgotPassword } from '_a/login';
import { isCheckPassword, confirmPassword, isMobile } from '_c/utils/validate';
import { sendVerifyCodeNoToken } from '_a/sms';

export default {
	name: 'forgotPayPassword',
	data() {
		return {
			customForm: {
				verifyCode: '',
				newPasswd: '',
				linkMobile: ''
			},
			placeholderPhone:'请输入手机号码',
			sms: {
				smsTitle: '获取验证码',
				smsNum: 59,
				disabled: false,
				time: null
			},
			type: '0' //0    忘记密码 1:修改密码
		};
	},
	onLoad(o) {
		this.type = o.type || 0;
		let title;
		switch (Number(this.type)) {
			case 0:
				title = '忘记支付密码';
				break;
			case 1:
				title = '修改支付密码';
				break;
			default:
				break;
		}
		uni.setNavigationBarTitle({
			title: title
		});
		let phone='15999505329'
		this.placeholderPhone = this.hidePhoneCenter(phone);
	},
	methods: {
		updateHandle() {
			let message = '';
			if (!this.customForm.linkMobile) {
				message = '请输入手机账号';
			}
			if (isCheckPassword(this.customForm.newPasswd)) {
				message = '新密码不能小于6位数';
			}
			if (!this.customForm.newPasswd) {
				message = '新密码不能为空';
			}
			if (message) {
				this.$tip.toast(message);
				return false;
			}
			forgotPassword(this.customForm).then(res => {
				if (res.code === 200) {
					this.customForm = {};
					this.$tip.modal({ content: res.msg, showCancel: false }).then(() => {
						if (this.type == 0) {
							this.$nav.goBack();
						} else {
							this.$store.dispatch('StoreByLogout').then(res => {
								this.$nav.reLaunch({ path: '/pages/login/index' });
							});
						}
					});
				}
			});
		},
		sendverifyCode() {
			if (this.customForm.linkMobile) {
				let message2 = '';

				if (isMobile(this.customForm.linkMobile)) {
					message2 = '手机号格式不正确';
				}
				let bool = isMobile(this.customForm.linkMobile);
				if (bool) {
					if (bool.isShow) {
						message2 = bool.text;
					} else {
						message2 = '手机号格式不正确';
					}
				}
				if (!this.customForm.linkMobile) {
					message2 = '请输入手机账号';
				}
				if (message2) {
					this.$tip.toast(message2);

					return false;
				}
				this.sms.disabled = true;
				/** 发送短信 **/

				sendVerifyCodeNoToken({ phone: this.customForm.linkMobile })
					.then(res => {
						if (res.code === 200) {
							this.sms.smsTitle = this.sms.smsNum + 's';
							this.smsCountdown();
						} else {
							this.sms.disabled = false;
							this.sms.smsNum = 59;
							this.sms.smsTitle = '重新发送';
						}
					})
					.catch(err => {
						this.sms.disabled = false;
						this.sms.smsNum = 59;
						this.sms.smsTitle = '重新发送';
					});
			} else {
				this.$tip.toast('请输入手机账号');
			}
		},
		smsCountdown() {
			/** 短信倒计时 **/
			const timeFunction = () => {
				this.sms.smsNum--;
				this.sms.smsTitle = this.sms.smsNum + '秒';
				/** 当时间差小于等于0时,停止倒计时 **/
				if (this.sms.smsNum <= 0) {
					this.sms.smsTitle = '重新发送';
					this.sms.disabled = false;
					this.sms.smsNum = 59;
					clearInterval(this.sms.time);
				}
			};
			/** 每一秒执行一次 **/
			const go = setInterval(() => {
				timeFunction();
			}, 1000);
			this.sms.time = go;
		},
		/* 隐藏手机号码中间4位 */
		hidePhoneCenter(tel){
			var reg=/(\d{3})\d{4}(\d{4})/;
			var phone = tel.replace(reg, "$1****$2")
			return phone
		}
	}
};
</script>

<style lang="scss" scoped>
	.wrapper{
		padding: $uni-spacing-row-lg;
	}
// .edit_passwork {
// 	margin: R(50px) R(25px);
// }

.edit_passwork .form-item {
	min-height: R(100px);
	margin: R(25px) 0;
	display: flex;
	align-items: center;
	padding: 0 R(20px);
	border-radius: $uni-border-radius-lg;
	background: #fff;
	box-shadow: 0 0 R(10px) rgba(0, 0, 0, 0.1);
}
.get-code-btn {
	// background: linear-gradient(to right, $themeColor, $themeColor);
	// border: $themeColor;
	color: $themeColor;
	// padding: 0 20upx;
	// border-radius: 30upx;
	// height: 50upx;
	// line-height: 50upx;
	font-size: $uni-font-size-sm;
}
.myBtn-box{
	margin:$uni-spacing-col-lg;
	display: flex;
	justify-content: center;
}
.myBtn{
	background: $themeColor;
	font-size: $uni-font-size-sm;
	border-radius: $uni-border-radius-lg;
	display: inline-block;
	margin: $uni-spacing-col-lg auto;
	padding: 2px 0px;
	width: 50vw;
}
/deep/.u-border-bottom:after {
	border: none;
}
</style>
